<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VIP</title>
    <link href="../css/VIP/VIP.css" rel="stylesheet">
</head>
<body>
<div class="nav">
    <div class="head-logo">
        <a href="" ></a>
    </div>
    <div class="head-nav">
        <ul>
            <li><a href="" class="first-item">首页</a> </li>
            <li><a href="">手机端</a> </li>
            <li><a href="">成为房东</a> </li>
            <li><a href="">房源订单中心</a> </li>
            <li><a href="">个人中心</a> </li>
            <li><a href="">帮助</a> </li>
        </ul>
    </div>
    <div class="head-login">
        <a href="">
            <img class="login-logo" src="../image/login-logo.svg"/>
            <span class="login-title">登录</span>
        </a>
        <a href="">
            <img class="regist-logo" src="../image/regist-logo.svg" >
            <span class="login-title">注册</span>
        </a>

    </div>
</div>
<div class="VIP_main">
    <!--VIP标题-->
    <div class="VIP_main_title">
        <ul>
            <li>我的会员</li>
        </ul>
    </div>
    <!--VIP等级-->
    <div class="VIP_main_grade">
        <span ><img src="../image/vip_title.svg"></span>
        <div class="vip_grade">
            <p class="vip_grade_title">您的会员等级</p>
            <p class="vip_grade_name">普通会员</p>
        </div>
    </div>
    <!--用户权益-->
    <div class="VIP_main_gradeGood">
        <p class="vip_gradeGood_title">您的等级权益</p>
        <p class="vip_gradeGood_name">可享受</p>
    </div>
    <!--VIP等级权益-->
    <div class="VIP_main_graderule">
        <div class="vip_graderule_title">
            <p><img src="../image/vip_rule_title.jpg"></p>
        </div>
        <div class="vip_graderule">
            <h2>会员等级</h2>
            <ul>
                <li>
                        <span><img src="../image/vip_grade1.svg"></span>
                        <label >普通会员</label>
                        <p >累计充值1000</p>
                </li>
                <li>
                    <span><img src="../image/vip_grade2.svg"></span>
                    <label >白金会员</label>
                    <p >累计充值1000</p>
                </li>
                <li>
                    <span><img src="../image/vip_grade3.svg"></span>
                    <label >黄金会员</label>
                    <p >累计充值1000</p>
                </li>
                <li>
                    <span><img src="../image/vip_grade4.svg"></span>
                    <label >砖石会员</label>
                    <p >累计充值1000</p>
                </li>
            </ul>
        </div>
        <div class="vip_rule_good">
            <h2>会员权益</h2>
            <table>
               <tr>
                   <td>
                       <label>普通会员</label>
                       <p>可享受</p>
                   </td>
                   <td>
                       <label>白金会员</label>
                       <p>可享受</p>
                   </td>
               </tr>
                <tr>
                    <td>
                        <label>黄金会员</label>
                        <p>可享受</p>
                    </td>
                    <td>
                        <label>钻石会员</label>
                        <p>可享受</p>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>
</body>
</html>